//具体的属性排序可以按照以下的规则：
//
//定位属性: position, float, z-index, clear
//盒模型相关属性: padding, margin, display, width, height, border
//字体相关
//CSS2 视觉相关属性 (background)
//CSS3 属性 (border-radius, box-shadow)

body {
	background-image: url(../img/bg5.jpg);
	/*使背景图不随页面的滚动而滚动*/
	background-attachment: fixed;
	/*使背景图始终填满整个屏幕*/
	background-size: cover;
	/*background-position: center; 使背景图居中*/
	background-position: center;
}
.container {
	/*width: 960px 设置外包围框的宽度。*/
	width: 960px;
	/*margin: 0 auto 让浏览器自动计算左右 margin，使外包围框居中。
    这个居中技巧只限于有设置宽度的容器。
  {top bottom} {left right}*/
	margin: 0 auto;
	
    .main-header {
    
        margin-top: 120px;
        padding: 1px;
        text-align: center;
        background-image: url(../img/banner.jpg);
        
        .main-header__avatar {
            display: block;
            margin: 0 auto;
            margin-top: -70px;
            margin-bottom: 10px;
            
            border: 3px solid white;
            border-radius: 999px;
            box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.2);
        }
        
        h1{
            margin-bottom: 20px;
            font-weight: 300;
            font-size: 50px;
            font-family: 'Open Sans','helvetica',arial,sans-serif;
            
            color:#FFFFFF;
            text-shadow: 0 1px rgba(0,0,0,0.3);
        }
    }	
}



